<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	#bj{ margin:30px auto 0; width:308px; background:url(iphone5%20%E7%99%BD%E8%89%B2.png);
	height:748px; background-size:contain; background-position:top left;
	background-repeat:no-repeat; position:relative;}
	#con{ width:256px; height:437px; position:absolute;
	top:106px; left:24px; background:#fff;}
	#main{ width:100%; height:377px;}
	#main_btm{ background:#f1f1f1; border-top:1px #ccc solid; width:100%; height:50px; padding-top:10px;}
	#oText{ width:160px; height:25px;}
	img{ vertical-align:bottom; width:30px; height:30px; cursor:pointer;}
	#main_top{ width:100%; height:30px; background:black; background:url(images/ccc.png); background-repeat:no-repeat; background-position:top left; background-size:cover;}
	#main_con{ width:100%; height:327px;overflow:scroll;}
	#btm{ width:100%; height:35px; background:url(images/ddd.png); background-size:cover; background-position:top left; background-repeat:no-repeat;}
	li{ list-style:none; line-height:30px;padding:3px; font-size:12px; max-width:200px;  word-break:break-all;
	vertical-align:text-top;}
	.right img{float:right; vertical-align:middle;margin-top:5px; }
	.right li{ float:right; display:inline-block;max-width:180px;margin-right:10px; overflow:hidden;word-break:break-all;}
	.left img{ float:left;  vertical-align:middle; margin-top:5px;}
	.left li{display:inline-block;max-width:180px; word-break:break-all;}
	.left li img{ float:none; }
	.right li img{ float:none; }
	#img2{ position:absolute; top:507px; left:713px; width:25px; height:25px;}
	#box{ position:absolute; top:460px; left:622px; display:none; z-index:999;}
	#tip{ width:150px; height:25px; line-height:25px; color:red; font-size:12px; text-align:center; border:1px gray solid;
	border-radius:10px; position:absolute; top:464px; left:642px; background:#fff;}
</style>
</head>

<body>
<div id="bj">
			<div id="con">
            		  <div id="main_top"></div>
                      <div id="main">
                                <div id="main_con"></div>
                                <div id="main_btm">
                                        <img src="aaa.jpg" id="img1" />
                                        <input type="text" id="oText">
                                        <input type="button" value="发送" id="oBtn">
                                </div>
                      </div>
                     <div id="btm">                   
                     </div>
            </div>
</div>
<!--下面做一个浮动框选择表情 -->
<div id="box" style=" display:none;">
	<img src="图像/001.png">
    <img src="图像/002.png">
    <img src="图像/003.png">
    <img src="图像/004.png">
</div>
<div id="btn"><img src="images/Screenshot_2015-10-19-13-53-25_05.png" id="img2"></div>
<!--添加一个内容为空的弹出框 -->
<div id="tip" style="display:none;">请您写点什么东西吧~~</div>
</body>
<script>
window.onload=function(){
		
		var oText = document.getElementById("oText");
		var oBtn = document.getElementById("oBtn");
		var oCon = document.getElementById("main_con");
		var oImg1 = document.getElementById("img1");	
		var onOff = true;
		oImg1.onclick=function(){
				if(onOff){
					oImg1.src="bbb.jpg";
					onOff = false;
					sClass = "right";
				}else{
					oImg1.src="aaa.jpg";
					onOff = true;
					sClass = "left";	
				}
		}
	var oTip = document.getElementById("tip");
	var sClass = "left";
		oBtn.onclick=function(){
			if(oText.value==""){
				oTip.style.display="block";
			}else{
				oTip.style.display="none";
						if(onOff){
						oCon.innerHTML="<div class='"+sClass+"'><img src='"+oImg1.src+"'><li>"+oText.value+"</li></div><br><br><br><br><br><br>"+oCon.innerHTML;	
				
						}else{
						oCon.innerHTML="<div class='"+sClass+"'><img src='"+oImg1.src+"'><li>"+oText.value+"</li></div><br><br><br><br><br>"+oCon.innerHTML;		
				}
					oText.value="";
			}
			
				
		}
		
	//表情添加
	var oImg2 = document.getElementById("img2");
	var oBox = document.getElementById("box");
	var aImg = oBox.getElementsByTagName("img");
	var arr=["1.png","2.png","3.png","4.png"];
	oImg2.onclick=function(){
		if(oBox.style.display=="none"){
			oBox.style.display="block";
			}else{
				oBox.style.display="none";	
			}
				
	}

	for(var i=0;i<aImg.length;i++){
		aImg[i].index=i;
		
			aImg[i].onclick=function(){
				oText.value +="<img src='图像/00"+arr[this.index]+"'>";
			//alert(arr[this.index]);
				oBox.style.display="none";	
			}
	}
	
}
</script>
</html>
